<template>
	<view class="details-page">
		<u-navbar title="AI创作" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="image-box" v-if="imageList.length == 1">
			<image @click="goopen(0)" :src="'http://gpt.szyirxx.com'+imageList[0]" mode="widthFix"></image>
		</view>
		<view class="image-box-list" v-else>
			<image @click="goopen(index)" v-for="(item, index) in imageList" :key="index"
				:src="'http://gpt.szyirxx.com'+item" mode="widthFix">
			</image>
		</view>
		<view class="details" v-if="details.images">
			<view class="title">
				画面描述
			</view>
			<view class="cont">
				{{details.desc}}
			</view>
		</view>
		<view class="details" v-if="details.images">
			<view class="title">
				创作信息
			</view>
			<view class="cont">
				<view class="cont-item" v-for="(item,index) in details.create_info" :key="index">
					<view>
						{{index}}
					</view>
					<view class="text">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="details" v-if="details.images">
			<view class="title">
				精绘
			</view>
			<view class="cont">
				<view class="cont-item" v-for="(item,index) in details.parameter_info" :key="index">
					<view>
						{{index}}
					</view>
					<view class="text">
						{{item}}
					</view>
				</view>
			</view>
			<u-overlay :show="show" @click="show = false">
				<view class="image-box2">
					<image :src="'http://gpt.szyirxx.com'+Image" mode="widthFix"></image>
				</view>
				<view class="imgbtn" @click="gocopy">复制链接</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				details: {},
				imageList: [],
				show: false,
				Image:''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.postdeatils()
		},
		methods: {
			gocopy() {
				let app = this
				app.show = false
				uni.setClipboardData({
					data: 'http://gpt.szyirxx.com' + app.image,
					success() {
						uni.showToast({
							title: '复制成功,请在浏览器打开',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			goopen(index) {
				this.Image = this.imageList[index]
				this.show = true
			},
			postdeatils() {
				let params = {
					work_id: this.id
				}
				this.$Request({
					method: 'POST',
					data: params,
					url: '/user/getWorksDetail'
				}).then(res => {
					if (res.data.code == 1) {
						this.details = res.data.data
						this.imageList = this.details.images
					}
				})
			},
			gonav() {
				uni.navigateTo({
					url: '/pages/my/works/index'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.details-page {
		padding: 30rpx 30rpx 100rpx 30rpx;

		.details {
			margin-top: 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.image-box2 {
				margin-top: 400rpx;
				text-align: center;
			}

			.imgbtn {
				width: 200rpx;
				background-color: #0055ff;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				padding: 10rpx 0;
				margin: 0 auto;
				margin-top: 30rpx;
				border-radius: 10rpx;
			}

			.cont {
				font-size: 30rpx;
				margin-top: 20rpx;
				border: 2rpx solid #7f7f7f;
				padding: 20rpx 30rpx;
				border-radius: 30rpx;
				color: #666;

				.cont-item {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;

					.text {
						font-size: 32rpx;
						color: #000;
					}
				}
			}
		}
	}

	.image-box {
		width: 80%;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.image-box-list {
		display: flex;
		flex-wrap: wrap;
		gap: 1%;
		justify-content: space-around;

		image {
			width: 48%;
			height: 48%;
			margin-bottom: 20rpx;
		}
	}
</style>